<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Card 卡片</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <h3>基础卡片</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="title">卡片标题</div>
                    <div class="content">
                        这是卡片的内容区域。卡片是一个很好的容器组件，可以用来展示各种信息。
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('basic-card')">
                <div class="code-actions-left">
                    <ons-icon id="icon-basic-card" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-basic-card" onclick="event.stopPropagation(); copyCode('basic-card')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-basic-card">
                <pre><code id="code-content-basic-card">&lt;ons-card&gt;
    &lt;div class="title"&gt;卡片标题&lt;/div&gt;
    &lt;div class="content"&gt;
        这是卡片的内容区域。卡片是一个很好的容器组件，可以用来展示各种信息。
    &lt;/div&gt;
&lt;/ons-card&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带图片的卡片</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div style="width: 100%; height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
                        <ons-icon icon="md-image" style="color: white; font-size: 60px;"></ons-icon>
                    </div>
                    <div class="title">图片卡片</div>
                    <div class="content">
                        卡片可以包含图片、文字和其他元素。
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('image-card')">
                <div class="code-actions-left">
                    <ons-icon id="icon-image-card" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-image-card" onclick="event.stopPropagation(); copyCode('image-card')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-image-card">
                <pre><code id="code-content-image-card">&lt;ons-card&gt;
    &lt;div style="width: 100%; height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;"&gt;
        &lt;ons-icon icon="md-image" style="color: white; font-size: 60px;"&gt;&lt;/ons-icon&gt;
    &lt;/div&gt;
    &lt;div class="title"&gt;图片卡片&lt;/div&gt;
    &lt;div class="content"&gt;
        卡片可以包含图片、文字和其他元素。
    &lt;/div&gt;
&lt;/ons-card&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">可点击的卡片</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card onclick="cardClicked('卡片 1')">
                    <div class="title">可点击卡片 1</div>
                    <div class="content">
                        点击这个卡片会触发事件。
                    </div>
                </ons-card>

                <ons-card onclick="cardClicked('卡片 2')" style="margin-top: 10px;">
                    <div class="title">可点击卡片 2</div>
                    <div class="content">
                        这也是一个可点击的卡片。
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('clickable-card')">
                <div class="code-actions-left">
                    <ons-icon id="icon-clickable-card" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-clickable-card" onclick="event.stopPropagation(); copyCode('clickable-card')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-clickable-card">
                <pre><code id="code-content-clickable-card">&lt;!-- HTML --&gt;
&lt;ons-card onclick="cardClicked('卡片 1')"&gt;
    &lt;div class="title"&gt;可点击卡片 1&lt;/div&gt;
    &lt;div class="content"&gt;
        点击这个卡片会触发事件。
    &lt;/div&gt;
&lt;/ons-card&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function cardClicked(cardName) {
    ons.notification.toast('点击了: ' + cardName, {
        timeout: 1500
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带按钮的卡片</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="title">操作卡片</div>
                    <div class="content">
                        这个卡片包含操作按钮。
                    </div>
                    <div style="padding: 10px; text-align: right;">
                        <ons-button modifier="quiet" onclick="showToast('取消')">取消</ons-button>
                        <ons-button modifier="cta" onclick="showToast('确认')">确认</ons-button>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('button-card')">
                <div class="code-actions-left">
                    <ons-icon id="icon-button-card" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-button-card" onclick="event.stopPropagation(); copyCode('button-card')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-button-card">
                <pre><code id="code-content-button-card">&lt;ons-card&gt;
    &lt;div class="title"&gt;操作卡片&lt;/div&gt;
    &lt;div class="content"&gt;
        这个卡片包含操作按钮。
    &lt;/div&gt;
    &lt;div style="padding: 10px; text-align: right;"&gt;
        &lt;ons-button modifier="quiet" onclick="showToast('取消')"&gt;取消&lt;/ons-button&gt;
        &lt;ons-button modifier="cta" onclick="showToast('确认')"&gt;确认&lt;/ons-button&gt;
    &lt;/div&gt;
&lt;/ons-card&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">信息卡片</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="title">
                        <ons-icon icon="md-info" style="color: #4a90e2;"></ons-icon>
                        提示信息
                    </div>
                    <div class="content">
                        <p style="margin: 5px 0;">这是一条重要的提示信息。</p>
                        <p style="margin: 5px 0; color: #666;">请仔细阅读以下内容：</p>
                        <ul style="margin: 10px 0; padding-left: 20px;">
                            <li>信息项 1</li>
                            <li>信息项 2</li>
                            <li>信息项 3</li>
                        </ul>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('info-card')">
                <div class="code-actions-left">
                    <ons-icon id="icon-info-card" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-info-card" onclick="event.stopPropagation(); copyCode('info-card')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-info-card">
                <pre><code id="code-content-info-card">&lt;ons-card&gt;
    &lt;div class="title"&gt;
        &lt;ons-icon icon="md-info" style="color: #4a90e2;"&gt;&lt;/ons-icon&gt;
        提示信息
    &lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;这是一条重要的提示信息。&lt;/p&gt;
        &lt;p style="color: #666;"&gt;请仔细阅读以下内容：&lt;/p&gt;
        &lt;ul&gt;
            &lt;li&gt;信息项 1&lt;/li&gt;
            &lt;li&gt;信息项 2&lt;/li&gt;
            &lt;li&gt;信息项 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/ons-card&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">用户卡片</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div style="display: flex; align-items: center; padding: 10px;">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 50%; margin-right: 15px; display: flex; align-items: center; justify-content: center;">
                            <ons-icon icon="md-account-circle" style="color: white; font-size: 36px;"></ons-icon>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: bold; font-size: 16px;">用户名称</div>
                            <div style="color: #666; font-size: 14px; margin-top: 5px;">这是用户的个人简介</div>
                        </div>
                    </div>
                    <div class="content">
                        <p>用户发布的内容会显示在这里。可以是文字、图片或其他媒体内容。</p>
                    </div>
                    <div style="padding: 10px; border-top: 1px solid #eee; display: flex; justify-content: space-around;">
                        <ons-button modifier="quiet" onclick="showToast('点赞')">
                            <ons-icon icon="md-thumb-up"></ons-icon> 点赞
                        </ons-button>
                        <ons-button modifier="quiet" onclick="showToast('评论')">
                            <ons-icon icon="md-comment"></ons-icon> 评论
                        </ons-button>
                        <ons-button modifier="quiet" onclick="showToast('分享')">
                            <ons-icon icon="md-share"></ons-icon> 分享
                        </ons-button>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('user-card')">
                <div class="code-actions-left">
                    <ons-icon id="icon-user-card" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-user-card" onclick="event.stopPropagation(); copyCode('user-card')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-user-card">
                <pre><code id="code-content-user-card">&lt;ons-card&gt;
    &lt;!-- 用户信息区域 --&gt;
    &lt;div style="display: flex; align-items: center; padding: 10px;"&gt;
        &lt;div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 50%; margin-right: 15px; display: flex; align-items: center; justify-content: center;"&gt;
            &lt;ons-icon icon="md-account-circle" style="color: white; font-size: 36px;"&gt;&lt;/ons-icon&gt;
        &lt;/div&gt;
        &lt;div style="flex: 1;"&gt;
            &lt;div style="font-weight: bold; font-size: 16px;"&gt;用户名称&lt;/div&gt;
            &lt;div style="color: #666; font-size: 14px; margin-top: 5px;"&gt;这是用户的个人简介&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;!-- 内容区域 --&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;用户发布的内容会显示在这里。可以是文字、图片或其他媒体内容。&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;!-- 操作区域 --&gt;
    &lt;div style="padding: 10px; border-top: 1px solid #eee; display: flex; justify-content: space-around;"&gt;
        &lt;ons-button modifier="quiet" onclick="showToast('点赞')"&gt;
            &lt;ons-icon icon="md-thumb-up"&gt;&lt;/ons-icon&gt; 点赞
        &lt;/ons-button&gt;
        &lt;ons-button modifier="quiet" onclick="showToast('评论')"&gt;
            &lt;ons-icon icon="md-comment"&gt;&lt;/ons-icon&gt; 评论
        &lt;/ons-button&gt;
        &lt;ons-button modifier="quiet" onclick="showToast('分享')"&gt;
            &lt;ons-icon icon="md-share"&gt;&lt;/ons-icon&gt; 分享
        &lt;/ons-button&gt;
    &lt;/div&gt;
&lt;/ons-card&gt;</code></pre>
            </div>
        </div>
    </div>

    <script src="../js/code-display.js"></script>
    <script>
        function cardClicked(cardName) {
            ons.notification.toast('点击了: ' + cardName, {
                timeout: 1500
            });
        }

        function showToast(action) {
            ons.notification.toast(action, {
                timeout: 1500
            });
        }
    </script>
</ons-page>
